<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>关于我们 - 探索世界后台管理系统</title>
  <style>
    :root {
      --primary-color: #2c5f3e;
      --secondary-color: #4a7c59;
      --accent-color: #8fbc8f;
      --text-color: #333;
      --bg-color: #f0f8f0;
      --card-bg: #ffffff;
      --border-color: #8fbc8f;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      line-height: 1.6;
      padding: 0;
      height: 100%;
    }

    .container {
      max-width: 100%;
      background-color: var(--card-bg);
      padding: 20px;
      height: 100%;
      overflow-y: auto;
    }

    header {
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 15px;
      border-bottom: 2px solid var(--accent-color);
    }

    h1 {
      font-size: 2.2em;
      color: var(--primary-color);
      margin-bottom: 10px;
    }

    .subtitle {
      color: var(--secondary-color);
      font-size: 1.1em;
    }

    .section {
      margin-bottom: 30px;
      background-color: #fdfdfd;
      padding: 20px;
      border-radius: 6px;
      border-left: 4px solid var(--accent-color);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .section-title {
      color: var(--primary-color);
      font-size: 1.5em;
      margin-bottom: 15px;
      padding-bottom: 8px;
      border-bottom: 1px dashed var(--accent-color);
    }

    p {
      margin-bottom: 12px;
      font-size: 1em;
      line-height: 1.8;
    }

    .tech-stack {
      font-family: 'Courier New', Courier, monospace;
      font-size: 0.95em;
      color: var(--primary-color);
      padding: 12px;
      background-color: #f8f9fa;
      border-radius: 6px;
      margin-top: 10px;
      border: 1px solid var(--accent-color);
      line-height: 1.8;
    }

    .team {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      justify-content: center;
    }

    .member {
      flex: 1 1 250px;
      text-align: center;
      padding: 20px;
      background-color: #fdfdfd;
      transition: all 0.3s ease;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--accent-color);
    }

    .member:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border-color: var(--primary-color);
    }

    .member h3 {
      color: var(--primary-color);
      margin: 10px 0;
      font-size: 1.3em;
    }

    .member .role {
      color: var(--secondary-color);
      font-style: italic;
      margin-bottom: 10px;
      font-weight: 500;
    }

    footer {
      text-align: center;
      margin-top: 40px;
      color: var(--secondary-color);
      font-size: 0.9em;
      padding-top: 15px;
      border-top: 1px solid var(--accent-color);
    }

    @media (max-width: 768px) {
      .container {
        padding: 10px;
      }
      
      h1 {
        font-size: 1.8em;
      }
      
      .section {
        padding: 15px;
      }
      
      .team {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <header>
    <h1>关于我们</h1>
    <p class="subtitle">我们是热爱技术与创新的学生开发者团队</p>
  </header>

  <div class="section">
    <h2 class="section-title">项目简介</h2>
    <p>"探索世界"旅游管理系统是一个基于SpringBoot + MyBatis + Vue的前后端分离旅游管理平台，旨在为景区、游客和管理员提供完整的旅游服务解决方案。</p>
    <p>系统包含景区信息管理、门票预订、订单处理、用户权限管理等多个核心功能模块，通过现代化的技术架构实现高效的数据管理和用户交互体验。</p>
  </div>

  <div class="section">
    <h2 class="section-title">核心功能</h2>
    <p><strong>景区管理：</strong>支持景区信息维护、景点管理、门票设置等完整业务流程</p>
    <p><strong>订单系统：</strong>实现游客门票预订、订单状态跟踪、支付处理等全流程管理</p>
    <p><strong>权限控制：</strong>基于RBAC模型的用户权限管理系统，支持角色分配和菜单权限控制</p>
    <p><strong>数据统计：</strong>提供各类业务数据的查询和统计功能</p>
  </div>

  <div class="section">
    <h2 class="section-title">技术栈</h2>
    <div class="tech-stack">
      前端：Vue 2 + axios + Element UI<br>
      后端：Spring Boot + Spring + MyBatis<br>
      数据库：MySQL<br>
      部署：Tomcat<br>
      分页插件：PageHelper<br>
      其他：Lombok、Log4j2
    </div>
  </div>

  <div class="section">
    <h2 class="section-title">我们的团队</h2>
    <div class="team">
      <div class="member">
        <h3>郭慧梓</h3>
        <div class="role">主要负责：订单相关业务</div>
      </div>

      <div class="member">
        <h3>李宗盛</h3>
        <div class="role">主要负责：景区相关业务</div>
      </div>

      <div class="member">
        <h3>梅文彬</h3>
        <div class="role">主要负责：权限相关业务</div>
      </div>
    </div>
  </div>

  <footer>
    <p>© QY186 第二组 | 探索世界后台管理系统 v1.0.0</p>
    <p>如有问题，请联系：3195603758@qq.com</p>
  </footer>
</div>
</body>
</html>